"use strict";

////////////////////////////////////////////////////////////////////////////////
// IMPORTS

import React, {
    Component,
} from 'react';

import {
    Animated,
    StyleSheet
} from 'react-native';


////////////////////////////////////////////////////////////////////////////////
// STYLES

var styles = StyleSheet.create({
    button: {
        backgroundColor: 'white',
        padding: 15,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#CDCDCD',
    }
});

////////////////////////////////////////////////////////////////////////////////
// COMPONENTS

class FadeInView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fadeAnim: new Animated.Value(0), // init opacity 0
        };
    }
    
    componentDidMount() {
        Animated.timing(          // Uses easing functions
            this.state.fadeAnim,    // The value to drive
            { toValue: 1 }            // Configuration
        ).start();                // Don't forget start!
    }
    
    render() {
        return (
            <Animated.View          // Special animatable View
                style={{ opacity: this.state.fadeAnim }}> // Binds
                {this.props.children}
            </Animated.View>
        );
    }
}